<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="肺癌外科治疗"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />
    
    <!-- 号源选择区域 -->
    <view class="availability-section">
      <scroll-view class="date-scroll" scroll-x>
        <view class="date-list">
          <!-- 全部号源
          <view 
            class="date-item all-available"
            :class="{ active: selectedDate === 'all' }"
            @click="selectDate('all')"
          >
            <text class="date-text">全部号源</text>
          </view> -->
          
          <!-- 未来一周日期 -->
          <view 
            v-for="(date, index) in weekDates" 
            :key="index"
            class="date-item"
            :class="{ active: selectedDate === date.key }"
            @click="selectDate(date.key)"
          >
            <text class="day-text">{{ date.day }}</text>
            <text class="date-text">{{ date.date }}</text>
            <!-- <text class="status-text" :class="{ available: date.hasSlots, unavailable: !date.hasSlots }">
              {{ date.hasSlots ? '有号' : '无号' }}
            </text> -->
          </view>
          
          <!-- 日历图标 -->
          <view class="calendar-icon">
            <van-icon name="calendar-o" size="20" />
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="filter-left">
        <text class="filter-text">医生筛选</text>
        <view class="filter-selector" @click="showFilterPicker">
          <text class="filter-value">{{ filterOptions[filterOption].text }}</text>
          <van-icon name="arrow-down" size="16" />
        </view>
      </view>
      <view class="filter-center">
        <text class="filter-text">筛选</text>
        <van-icon name="arrow-down" />
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <van-popup 
      v-model:show="showFilter" 
      position="bottom" 
      :style="{ height: '30%' }"
    >
      <view class="filter-popup">
        <view class="popup-header">
          <text class="popup-title">选择筛选条件</text>
          <van-icon name="cross" @click="hideFilterPicker" />
        </view>
        <view class="filter-options">
          <view 
            v-for="(option, index) in filterOptions" 
            :key="index"
            class="filter-option-item"
            :class="{ active: filterOption === option.value }"
            @click="selectFilter(option.value)"
          >
            <text class="option-text">{{ option.text }}</text>
            <van-icon 
              v-if="filterOption === option.value" 
              name="success" 
              color="#07c160" 
            />
          </view>
        </view>
      </view>
    </van-popup>
    
    <!-- 医生列表 -->
    <view class="doctor-list">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-section">
        <van-loading size="24px" />
        <text class="loading-text">正在加载医生信息...</text>
      </view>
      
      <!-- 错误状态 -->
      <view v-else-if="error" class="error-section">
        <text class="error-text">{{ error }}</text>
        <van-button type="primary" size="small" @click="fetchDoctors">
          重新加载
        </van-button>
      </view>
      
      <!-- 医生列表 -->
      <view v-else>
        <view 
          v-for="doctor in filteredDoctors" 
          :key="doctor.id"
          class="doctor-card"
        >
          <!-- 医生头像 -->
          <view class="doctor-avatar">
            <image :src="doctor.avatar" mode="aspectFill" />
          </view>
          
          <!-- 医生信息 -->
          <view class="doctor-info">
            <view class="doctor-header">
              <text class="doctor-name">{{ doctor.name }}</text>
              <text class="doctor-title">{{ doctor.title }}</text>
              <view class="availability-badge" :class="{ 
                available: doctor.available, 
                unavailable: !doctor.available 
              }">
                {{ doctor.available ? `有号(${doctor.availableSlots || 0})` : '无号' }}
              </view>
            </view>
            
            <view class="doctor-department">{{ doctor.department }}</view>
            <view class="doctor-specialty">职务: {{ doctor.subSpecialty }}</view>
            <view class="doctor-period" v-if="doctor.period">门诊时段: {{ doctor.period }}</view>
            <view class="doctor-slots" v-if="doctor.slotTotal">
              号源情况: {{ doctor.slotUse }}/{{ doctor.slotTotal }}
            </view>
            <view class="doctor-expertise">
              {{ doctor.expertise }}
            </view>
          </view>
          
          <!-- 操作按钮 -->
          <view class="doctor-actions">
            <van-button 
              type="primary" 
              size="small" 
              plain
              class="action-btn online-btn"
              @click="onlineConsultation(doctor)"
            >
              在线门诊
            </van-button>
            <van-button 
              type="primary" 
              size="small" 
              plain
              class="action-btn appointment-btn"
              @click="makeAppointment(doctor)"
            >
              预约挂号
            </van-button>
          </view>
        </view>
      </view>
    </view>
    
    
    
    <!-- 分页 -->
    <view class="pagination">
      <van-icon name="arrow-left" />
      <text class="page-text">1/3</text>
      <van-icon name="arrow" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 添加store导入
import { useMedicalStore } from '@/stores/modules/medical'
import { useMessageStore } from '@/stores/modules/message'

// 医生接口定义
interface Doctor {
  id: number
  name: string
  title: string
  department: string
  subSpecialty: string
  expertise: string
  avatar: string
  available: boolean
  schedule: Record<string, boolean> // 日期对应的排班情况
  consultationPrice: number // 问诊价格
  // 新增字段
  period?: string // 门诊时段
  slotTotal?: number // 总号源
  slotUse?: number // 已用号源
  availableSlots?: number // 可用号源
}

// 日期接口定义
interface WeekDate {
  key: string
  day: string
  date: string
  hasSlots: boolean
}

// 新增：医生API接口
import { getClinicStaff, type GetClinicStaffItem } from '@/api/appointment'

// 初始化store
const medicalStore = useMedicalStore()
const messageStore = useMessageStore()

// 修正转换API返回的医生数据格式
const transformApiDoctor = (apiStaff: GetClinicStaffItem): Doctor => {
  // 安全地获取staff信息
  const staff = apiStaff.staffDetailVo
  if (!staff) {
    throw new Error('staffDetailVo 缺失')
  }
  
  const hasAvailableSlots = (apiStaff.slotTotal || 0) - (apiStaff.slotUse || 0) > 0
  
  return {
    id: parseInt(staff.staffId || '0'),
    name: staff.staffName || '未知医生',
    title: staff.titleName || '医生',
    department: departmentName.value, // 使用当前科室名称
    subSpecialty: staff.positionName || '医生', // 使用职务作为亚专业
    expertise: `${staff.titleName || '医生'}，${staff.positionName || ''}`, // 组合职称和职务
    avatar: staff.avatar || '/static/logo.png',
    available: hasAvailableSlots,
    consultationPrice: getTitlePrice(staff.titleLevel || '1'), // 根据职称级别设置价格
    schedule: generateScheduleFromApi(apiStaff), // 根据API数据生成排班
    // 新增字段用于显示更多信息
    period: apiStaff.period || '全天',
    slotTotal: apiStaff.slotTotal || 0,
    slotUse: apiStaff.slotUse || 0,
    availableSlots: (apiStaff.slotTotal || 0) - (apiStaff.slotUse || 0)
  }
}

// 根据职称级别设置价格
const getTitlePrice = (titleLevel: string): number => {
  const level = parseInt(titleLevel)
  switch (level) {
    case 5: return 100 // 正高级
    case 4: return 80  // 副高级
    case 3: return 60  // 中级
    case 2: return 40  // 初级
    default: return 30
  }
}

// 根据API数据生成排班信息
const generateScheduleFromApi = (apiStaff: GetClinicStaffItem): Record<string, boolean> => {
  const schedule: Record<string, boolean> = {}
  const clinicDateObj = new Date(apiStaff.clnicTime)
  
  // 使用本地时间格式化日期，避免时区转换问题
  const year = clinicDateObj.getFullYear()
  const month = String(clinicDateObj.getMonth() + 1).padStart(2, '0')
  const day = String(clinicDateObj.getDate()).padStart(2, '0')
  const clinicDate = `${year}-${month}-${day}`
  
  // 标记该医生在指定日期有排班
  schedule[clinicDate] = (apiStaff.slotTotal - apiStaff.slotUse) > 0
  
  return schedule
}

// 修正API请求函数
const fetchDoctors = async () => {
  loading.value = true
  error.value = ''
  
  try {
    const formattedDate = getFormattedDate(selectedDate.value)
    
    const params = {
      typeId: 1,
      deptId: parseInt(departmentId.value) || 26,
      clnicTime: formattedDate
    }
    
    // 详细的调试信息
    console.log('=== API请求调试信息 ===')
    console.log('当前选择的日期Key:', selectedDate.value)
    console.log('科室ID:', departmentId.value)
    console.log('格式化后的日期:', formattedDate)
    console.log('完整请求参数:', params)
    console.log('日期格式验证 - 应该是 YYYY-M-D 格式:', /^\d{4}-\d{1,2}-\d{1,2}$/.test(formattedDate))
    
    const response = await getClinicStaff(params)
    
    console.log('API响应:', response)
    
    if (response.code === 200) {
      // 检查数据是否存在且是数组
      if (!response.data) {
        console.log('后端返回数据为空')
        doctors.value = []
        uni.showToast({
          title: '暂无医生排班信息',
          icon: 'none'
        })
        return
      }
      
      if (!Array.isArray(response.data)) {
        console.log('后端返回的data不是数组:', typeof response.data, response.data)
        doctors.value = []
        uni.showToast({
          title: '数据格式错误',
          icon: 'none'
        })
        return
      }
      
      // 处理API返回的数据
      const staffList = response.data as GetClinicStaffItem[]
      console.log('医生数据:', staffList)
      
      if (staffList.length === 0) {
        console.log('医生列表为空')
        doctors.value = []
        uni.showToast({
          title: '该日期暂无医生排班',
          icon: 'none'
        })
        return
      }
      
      // 按医生分组，合并同一医生的不同时段
      const doctorMap = new Map<string, Doctor>()
      
      staffList.forEach(staff => {
        // 检查staff及其嵌套对象是否存在
        if (!staff || !staff.staffDetailVo) {
          console.warn('医生数据不完整:', staff)
          return
        }
        
        const doctorId = staff.staffDetailVo.staffId
        
        if (!doctorId) {
          console.warn('医生ID缺失:', staff)
          return
        }
        
        if (doctorMap.has(doctorId)) {
          const existingDoctor = doctorMap.get(doctorId)!
          existingDoctor.slotTotal! += staff.slotTotal || 0
          existingDoctor.slotUse! += staff.slotUse || 0
          existingDoctor.availableSlots = existingDoctor.slotTotal! - existingDoctor.slotUse!
          existingDoctor.available = existingDoctor.availableSlots > 0
          
          // 安全地处理period字段
          if (staff.period && existingDoctor.period && !existingDoctor.period.includes(staff.period)) {
            existingDoctor.period += `、${staff.period}`
          }
        } else {
          try {
            doctorMap.set(doctorId, transformApiDoctor(staff))
          } catch (transformError) {
            console.error('转换医生数据失败:', transformError, staff)
          }
        }
      })
      
      doctors.value = Array.from(doctorMap.values())
      console.log('处理后的医生列表:', doctors.value)
      
      if (doctors.value.length === 0) {
        uni.showToast({
          title: '未找到有效的医生信息',
          icon: 'none'
        })
      }
    } else {
      // 处理非200状态码
      console.log('API返回错误状态码:', response.code)
      error.value = response.msg || '获取医生列表失败'
      uni.showToast({
        title: error.value,
        icon: 'none'
      })
    }
  } catch (err: any) {
    error.value = '获取医生列表失败，请重试'
    console.error('获取医生列表失败:', err)
    
    // 显示更详细的错误信息
    let errorMessage = '网络请求失败'
    if (err && typeof err === 'object') {
      if ((err as any).errMsg) {
        errorMessage = (err as any).errMsg
      } else if ((err as any).message) {
        errorMessage = (err as any).message
      }
    }
    
    uni.showToast({
      title: errorMessage,
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 修正格式化日期函数
const getFormattedDate = (dateKey: string): string => {
  console.log('格式化日期 - 输入dateKey:', dateKey)
  
  // 如果是"全部号源"，使用今天的日期
  if (dateKey === 'all') {
    const today = new Date()
    const formatted = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
    console.log('全部号源 - 使用今天日期:', formatted)
    return formatted
  }
  
  const actualDate = getActualDateString(dateKey)
  console.log('获取到的实际日期字符串:', actualDate)
  
  if (!actualDate) {
    // 如果获取不到实际日期，使用今天
    const today = new Date()
    const formatted = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
    console.log('无法获取实际日期 - 使用今天:', formatted)
    return formatted
  }
  
  const date = new Date(actualDate)
  console.log('解析后的Date对象:', date)
  
  // 检查日期是否有效
  if (isNaN(date.getTime())) {
    const today = new Date()
    const formatted = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
    console.log('日期无效 - 使用今天:', formatted)
    return formatted
  }
  
  // 转换为 "2025-8-18" 格式
  const formatted = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
  console.log('最终格式化的日期:', formatted)
  return formatted
}

// 改进getActualDateString函数
const getActualDateString = (dateKey: string): string => {
  if (dateKey === 'all') return ''
  
  const today = new Date()
  let targetDate: Date
  
  if (dateKey === 'today') {
    targetDate = today
  } else if (dateKey === 'tomorrow') {
    targetDate = new Date(today)
    targetDate.setDate(today.getDate() + 1)
  } else {
    // 对于其他日期，从weekDates中找到对应的索引
    const index = weekDates.value.findIndex(date => date.key === dateKey)
    if (index !== -1) {
      targetDate = new Date(today)
      targetDate.setDate(today.getDate() + index)
    } else {
      // 如果找不到，返回今天
      targetDate = today
    }
  }
  
  // 使用本地时间格式化日期，避免时区转换问题
  const year = targetDate.getFullYear()
  const month = String(targetDate.getMonth() + 1).padStart(2, '0')
  const day = String(targetDate.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 更新Doctor接口定义 后端对应staff
interface Doctor {
  id: number
  name: string
  title: string
  department: string
  subSpecialty: string
  expertise: string
  avatar: string
  available: boolean
  schedule: Record<string, boolean>
  consultationPrice: number
  // 新增字段
  period?: string // 门诊时段
  slotTotal?: number // 总号源
  slotUse?: number // 已用号源
  availableSlots?: number // 可用号源
}

// 响应式数据
const departmentId = ref('')
const departmentName = ref('')
const selectedDate = ref('all')
const filterOption = ref(0) // 0: 全部, 1: 仅有号, 2: 仅无号
const showFilter = ref(false) // 控制筛选弹窗显示
// 新增就诊卡相关参数
const cardId = ref('')
const cardName = ref('')

// 筛选选项
const filterOptions = [
  { text: '全部医生', value: 0 },
  { text: '仅显示有号', value: 1 },
  { text: '仅显示无号', value: 2 }
]

// 新增响应式数据
const loading = ref(false)
const error = ref('')

// 显示筛选选择器
const showFilterPicker = () => {
  showFilter.value = true
}

// 隐藏筛选选择器
const hideFilterPicker = () => {
  showFilter.value = false
}

// 选择筛选条件
const selectFilter = (value: number) => {
  filterOption.value = value
  showFilter.value = false
  console.log('筛选选项变更:', filterOptions[value].text)
}

// 动态生成未来一周日期数据
const weekDates = computed<WeekDate[]>(() => {
  const dates: WeekDate[] = []
  const today = new Date()
  
  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(today)
    currentDate.setDate(today.getDate() + i)
    
    const month = String(currentDate.getMonth() + 1).padStart(2, '0')
    const day = String(currentDate.getDate()).padStart(2, '0')
    const dateStr = `${month}-${day}`
    
    // 生成key和显示文本
    let key: string
    let dayText: string
    
    if (i === 0) {
      key = 'today'
      dayText = '今天'
    } else if (i === 1) {
      key = 'tomorrow'
      dayText = '明天'
    } else {
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      key = `day_${i}`
      dayText = weekdays[currentDate.getDay()]
    }
    
    // 模拟号源情况（您可以根据实际业务逻辑调整）
    const hasSlots = checkDoctorAvailability(currentDate, key)
    
    dates.push({
      key,
      day: dayText,
      date: dateStr,
      hasSlots
    })
  }
  
  return dates
})

// 检查医生号源可用性的函数
const checkDoctorAvailability = (date: Date, dateKey: string): boolean => {
  // 这里可以根据您的业务逻辑来判断
  // 例如：周末通常号源较少，工作日较多
  const dayOfWeek = date.getDay()
  
  // 简单逻辑：周六日号源较少，其他时间正常
  if (dayOfWeek === 0 || dayOfWeek === 6) {
    return Math.random() > 0.3 // 30%概率有号
  }
  
  return Math.random() > 0.1 // 90%概率有号
}




// 医生数据（
const doctors = ref<Doctor[]>([])

// 计算属性：根据选择的日期和筛选条件过滤医生
const filteredDoctors = computed(() => {
  let result = doctors.value
  
  console.log('筛选前的医生数据:', result)
  console.log('当前筛选选项:', filterOption.value)
  console.log('当前选择日期:', selectedDate.value)
  
  // 根据筛选条件过滤医生状态
  if (filterOption.value === 1) {
    // 
    result = result.filter((doctor: Doctor) => {
      if (selectedDate.value !== 'all') {
        const selectedDateStr = getActualDateString(selectedDate.value)
        return doctor.available && doctor.schedule[selectedDateStr] === true
      }
      return doctor.available
    })
  } else if (filterOption.value === 2) {
    // 仅显示无号医生 - 显示所有无号的医生，不受日期限制
    result = result.filter((doctor: Doctor) => !doctor.available)
  } else {
    // 显示全部医生 - 显示所有医生，不受日期和号源限制
    // filterOption.value === 0，不进行任何过滤
  }
  
  console.log('筛选后的医生数据:', result)
  return result
})

// 优化后的日期选择函数
const selectDate = async (dateKey: string) => {
  selectedDate.value = dateKey
  
  // 当选择不同日期时，重新请求医生数据
  await fetchDoctors()
}

// 在线门诊
const onlineConsultation = (doctor: Doctor) => {
  console.log('点击在线门诊', doctor)
  
  // 跳转到确认订单页面
  const url = `/pages/online-consultation/confirm-order?doctorId=${doctor.id}&doctorName=${doctor.name}&departmentName=${departmentName.value || '肺癌外科治疗'}&consultationPrice=${doctor.consultationPrice}`
  console.log('跳转URL:', url)
  
  uni.navigateTo({
    url: url
  })
}

// 预约挂号 - 修改为跳转到医生预约详情页面
const makeAppointment = (doctor: Doctor) => {
  console.log('点击预约挂号', doctor)
  console.log('当前科室名称:', departmentName.value)
  
  // 跳转到医生预约详情页面
  const url = `/pages/appointment/doctor-appointment?doctorId=${doctor.id}&doctorName=${doctor.name}&departmentName=${departmentName.value}&department=${doctor.department}`
  console.log('跳转到医生预约页面:', url)
  
  uni.navigateTo({
    url: url
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 测试跳转功能
const testNavigation = () => {
  console.log('测试跳转功能')
  console.log('当前科室名称:', departmentName.value)
  
  // 测试直接跳转
  const testUrl = `/pages/appointment/medical-card-select?doctorId=999&doctorName=测试医生&departmentName=${departmentName.value || '测试科室'}`
  console.log('测试跳转URL:', testUrl)
  
  uni.navigateTo({
    url: testUrl
  })
}

// 页面加载 - 简化，移除就诊卡参数获取
onLoad(async (options: Record<string, string>) => {
  departmentId.value = options.departmentId || '26'
  departmentName.value = options.departmentName || '肺癌外科治疗'
  
  // 设置默认选择今天
  selectedDate.value = 'today'
  
  console.log('页面参数:', options)
  console.log('科室ID:', departmentId.value)
  
  // 检查当前是否有选中的就诊卡
  const currentCard = medicalStore.getCurrentMedicalCard()
  console.log('当前就诊卡信息:', currentCard)
  
  // 加载医生数据
  await fetchDoctors()
})
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

// 号源选择区域
.availability-section {
  background: white;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.date-scroll {
  white-space: nowrap;
}

.date-list {
  display: flex;
  padding: 0 20rpx;
  align-items: center;
}

.date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 16rpx;
  background: #f5f5f5;
  padding: 16rpx;
  transition: all 0.3s;
  
  &.active {
    background: #07c160;
    color: white;
    
    .status-text {
      color: white !important;
    }
  }
  
  &.all-available {
    background: #07c160;
    color: white;
    min-width: 140rpx;
  }
}

.day-text {
  font-size: 24rpx;
  margin-bottom: 8rpx;
}

.date-text {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.status-text {
  font-size: 22rpx;
  
  &.available {
    color: #07c160;
  }
  
  &.unavailable {
    color: #999;
  }
}

.calendar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  color: #666;
}

// 筛选区域样式
.filter-section {
  background: white;
  padding: 20rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.filter-left {
  display: flex;
  align-items: center;
}

.filter-text {
  font-size: 28rpx;
  color: #333;
  margin-right: 16rpx;
}

.filter-selector {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  background: #fafafa;
}

.filter-value {
  font-size: 26rpx;
  color: #666;
  margin-right: 8rpx;
}

.filter-center {
  display: flex;
  align-items: center;
}

// 筛选弹窗样式
.filter-popup {
  padding: 40rpx 32rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.filter-options {
  .filter-option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f8f8f8;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.active {
      .option-text {
        color: #07c160;
        font-weight: bold;
      }
    }
    
    .option-text {
      font-size: 28rpx;
      color: #333;
    }
  }
}

// 医生列表
.doctor-list {
  padding: 0 20rpx;
}

.doctor-card {
  display: flex;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.doctor-avatar {
  margin-right: 30rpx;
  
  image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid #f0f0f0;
  }
}

.doctor-info {
  flex: 1;
}

.doctor-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  flex-wrap: wrap;
}

.doctor-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}

.doctor-title {
  font-size: 26rpx;
  color: #666;
  margin-right: 20rpx;
}

.availability-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #999;
  background: #f5f5f5;
  
  &.available {
    color: #07c160;
    background: #e8f5e8;
  }
}

.doctor-department {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 12rpx;
}

.doctor-specialty {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 12rpx;
}

.doctor-period, .doctor-slots {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 12rpx;
}

.availability-badge {
  &.available {
    color: #07c160;
    background: #e8f5e8;
  }
}

.doctor-actions {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-left: 20rpx;
}

.action-btn {
  min-width: 160rpx;
  
  &.online-btn {
    border-color: #1989fa;
    color: #1989fa;
  }
  
  &.appointment-btn {
    border-color: #07c160;
    color: #07c160;
  }
}

// 测试区域
.test-section {
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.test-btn {
  background: #ff9500;
  border: none;
  border-radius: 25rpx;
  height: 88rpx;
  font-size: 32rpx;
  font-weight: bold;
}

// 分页
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40rpx;
  padding: 40rpx;
  background: white;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1rpx solid #f0f0f0;
}

.page-text {
  font-size: 28rpx;
  color: #666;
}

// 加载和错误状态样式
.loading-section, .error-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  text-align: center;
}

.loading-text, .error-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}

.error-text {
  color: #ff4444;
  margin-bottom: 30rpx;
}
.availability-badge {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: bold;
  margin-left: 16rpx;
  
  &.available {
    background: #e8f5e8;
    color: #07c160;
  }
  
  &.unavailable {
    background: #ffeaea;
    color: #ff4444;
  }
}
</style>